<script setup>
  import { computed, ref } from 'vue';
  import { reactive } from 'vue';

  const message = ref('helloworld')
  const rawHtml = ref('abcdefghyzklmnopqrstuvwxyz')
  const url = ref('http://www.baidu.com')

  const score = ref(0)

  const num = ref(0)
  const studentInfoKeys = reactive({
    name: '姓名',
    live: '宿舍',
    score: '成绩'
})
  const studentInfos = reactive([
    {name:'zhangsan',live:'yssy',score:50},
    {name:'wanwu',live:'sxsy',score:80},
    {name:'lisi',live:'sssy',score:99},
    {name:'zhaoliu',live:'sdsy',score:60}
  ])

  const Class = {
    name:'DSJ1',
    school:'qvtu'
  }
  const myclass = reactive(Class)
  const movieA = ref({
    name:'movieA_name',
    shouzhong:'大',
    juqing:'好'
  })
  const movieA_Eva = computed(()=>{
    console.log('==computed==')
    return movieA.value.shouzhong == '大' && movieA.value.juqing == '好'
    ? '成功的'
    : '失败的'
  })

  console.log(Class)
  console.log(myclass)
  console.log(myclass == Class)//是否相等，false，类型不同

  console.log(message)
  console.log(message.value)
  
  function hello(){
    console.log('HELLO!')  
  }
  function addone(){
    num.value++
  }
  function erone(){
    num.value--
  }
  function movieA_Eva_fun()
  {
    console.log('==function==')
    return movieA.value.shouzhong == '大' && movieA.value.juqing == '好'
    ? '成功的'
    : '失败的'
  }
  import{
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
  } from 'vue'
  console.log('生命周期：setup')

  onBeforeMount(()=>{
    console.log('生命周期：onBeforeMount')
  })
  onMounted(()=>{
    console.log('生命周期：onMounted')
  })
  onBeforeUpdate(()=>{
    console.log('生命周期：onBeforeUpdate')
  })
  onUpdated(()=>{
    console.log('生命周期：onUpdated')
  })
  onBeforeUnmount(()=>{
    console.log('生命周期：onBeforeUnmount')
  })
  onUnmounted(()=>{
    console.log('生命周期：onUnmounted')
  })
</script>

<template>
  <h1>{{ message }}</h1>
  <p v-show="true">使用文本插值：{{ rawHtml }}</p>
  <p v-show="true">使用原始HTML：<span style="color: red;" v-html = "rawHtml"></span></p>
  <a v-bind:href="url">baidu</a>
  <a :href="url">baidu</a>
  <a v-on:click="console.log('holle')">\o/</a>
  <a @click="console.log('holle')">\o/</a>
  <button @click="hello()">你好</button>
  <h1>{{ num }}</h1>
  <button @click="addone()">add</button>
  <button @click="erone()">{{ num }}</button>
  <p>js调用:电影{{ movieA.name }}是{{ movieA.shouzhong == '大'&& movieA.juqing == '好' ? '成功的':'失败的'  }}</p>
  <p>使用计算属性:电影{{movieA.name}}是{{ movieA_Eva }}</p>
  <p>使用方法:电影{{movieA.name}}是{{ movieA_Eva_fun() }}</p>
  <div>
   <!-- 条件渲染 -->
    <input v-model="score" type="number">
    <p v-if="score>=85">A</p>
    <P v-else-if="score>=70">B</P>
    <P v-else-if="score>=60">C</P>
    <P v-else>D</P>
  </div>
  <div>
    <!-- 循环渲染 -->
    <p v-for="studentInfos in studentInfos":key="studentInfos.name">
      {{ studentInfos.name }}在{{studentInfos.live}}
    </p>
    <p v-for="(studentInfos,index) in studentInfos">
      {{ index+1 }}{{ studentInfos.name }}在{{ studentInfos.live }}
    </p>
    <p v-for="(value,key,index) in movieA">
      {{ index+1 }}. KEY是{{ key }}, VALUE是{{ value }}
    </p>
  </div>
  <div>
    <p v-for="studentInfos in studentInfos">
      <p v-if="studentInfos.score>=60">{{ studentInfos.name }}及格</p>
      <p v-else>{{ studentInfos.name }}不及格</p>
    </p>
  </div>
  <div>
   <table border="1">
    <thead>
      <tr>
        <th v-for="column,key in studentInfoKeys" :key="key">
          {{ column }} ({{ key }})
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="studentInfos in studentInfos">
        <td v-for="column,key,index in studentInfoKeys":key="studentInfos.name">
          <span v-if="column=='成绩'">
            <span v-show="studentInfos[key]>=60">及格</span>
            <span v-show="studentInfos[key]<60">不及格</span>
          </span>
          <span v-else>
            {{studentInfos[key]}}
          </span>
        </td>
      </tr>
    </tbody>
   </table>
               
  </div>
  <div>
    <input placeholder="text01" keyup.esc="test">
  </div>
</template>

<style scoped>

</style>
